import {App, PluginSettingTab, Setting} from "obsidian";
import FlomoImporterPlugin from "./main";

export class TemplateSetting{
    public name: string;
    public template: string;

    constructor(name: string="", template: string="") {
        this.name = name;
        this.template = template;
    }
}

export class SettingTab extends PluginSettingTab {
    plugin: FlomoImporterPlugin;
    constructor(app: App, plugin: FlomoImporterPlugin) {
        super(app, plugin);
        this.plugin = plugin;
    }

    arraymove<T>(
        arr: T[],
        fromIndex: number,
        toIndex: number
    ): void {
        if (toIndex < 0 || toIndex === arr.length) {
            return;
        }
        const element = arr[fromIndex];
        arr[fromIndex] = arr[toIndex];
        arr[toIndex] = element;
    }

    display(): void {
        const {containerEl} = this;
        containerEl.empty();

        this.containerEl.createEl("h2", { text: "Template mapping setting." });
        const desc = document.createDocumentFragment();
        desc.append(
            "Define template mapping. name is the key link with frontmatter attributes definition."
        );

        this.plugin.settings.templates.forEach((item, index) => {
            const s = new Setting(this.containerEl)
                .addText(text => text
                    .setPlaceholder("待办提醒/已完成")
                    .setValue(this.plugin.settings.templates[index].name)
                    .onChange(async (value) => {
                        this.plugin.settings.templates[index].name = value;
                        await this.plugin.saveSettings();
                    }))
                .addText(text => text
                    .setPlaceholder("- [x] {{{content}}}")
                    .setValue(this.plugin.settings.templates[index].template)
                    .onChange(async (value) => {
                        this.plugin.settings.templates[index].template = value;
                        await this.plugin.saveSettings();
                    }))
                .addExtraButton((cb) => {
                    cb.setIcon("up-chevron-glyph")
                        .setTooltip("Move up")
                        .onClick(async () => {
                            this.arraymove(
                                this.plugin.settings.templates,
                                index,
                                index - 1
                            );
                            await this.plugin.saveSettings();
                            this.display();
                        });
                })
                .addExtraButton((cb) => {
                    cb.setIcon("down-chevron-glyph")
                        .setTooltip("Move down")
                        .onClick(async () => {
                            this.arraymove(
                                this.plugin.settings.templates,
                                index,
                                index + 1
                            );
                            await this.plugin.saveSettings();
                            this.display();
                        });
                })
                .addExtraButton((cb) => {
                    cb.setIcon("cross")
                        .setTooltip("Delete")
                        .onClick(async () => {
                            this.plugin.settings.templates.splice(
                                index,
                                1
                            );
                            await this.plugin.saveSettings();
                            // Force refresh
                            this.display();
                        });
                })
                .addExtraButton(cb => {
                    cb.setIcon("copy")
                        .setTooltip("Copy")
                        .onClick(async () =>{
                            let copied = new TemplateSetting();
                            copied.name = this.plugin.settings.templates[index].name;
                            copied.template = this.plugin.settings.templates[index].template;
                            this.plugin.settings.templates.push(copied);
                            await this.plugin.saveSettings();
                            // Force refresh
                            this.display();
                        })
                })
        });
        new Setting(this.containerEl).addButton((cb) => {
            cb.setButtonText("Add new template")
                .setCta()
                .onClick(async () => {
                    this.plugin.settings.templates.push(new TemplateSetting());
                    await this.plugin.saveSettings();
                    // Force refresh
                    this.display();
                });
        });
    }
}